<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>all</title>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/js/Extjs/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css">  
<script type="text/javascript" src="__PUBLIC__/js/Extjs/build/ext-all.js"></script>  
<script type="text/javascript" src="__PUBLIC__/js/Extjs/build/packages/ext-theme-classic/build/ext-theme-classic.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/Extjs/build/packages/ext-charts/build/ext-charts.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/Extjs/build/DateTimePicker.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/Extjs/build/DateTime.js"></script>
<script type="text/javascript">
var PUBLIC = "__PUBLIC__";
var ROOT = "__ROOT__";
var uid = {$Think.session.id};
var USERNAME = '{$Think.session.username}';
</script>
<script type="text/javascript" src="__PUBLIC__/js/public/function.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/app/Application.js"></script>
<script>
/* Ext.onReady(function(){
	Ext.define('User', {
	    extend: 'Ext.data.Model',
	    fields: [
	        {name: 'firstName', type: 'string'},
	        {name: 'lastName',  type: 'string'},
	        {name: 'age',       type: 'int'},
	        {name: 'eyeColor',  type: 'string'}
	    ]
	});
	Ext.create('Ext.data.Store', {
	    model: 'User',
	    data : [
	        {firstName: 'Ed',    lastName: 'Spencer'},
	        {firstName: 'Tommy', lastName: 'Maintz'},
	        {firstName: 'Aaron', lastName: 'Conran'},
	        {firstName: 'Jamie', lastName: 'Avins'}
	    ]
	});
}) */
/*
Ext.onReady(function() {
	
	 var store = Ext.create("Ext.data.TreeStore", {
         root:{
             expanded:true,
             children:[ {
                 text:"detention",
                 data:"html1.html",
                 leaf:true
             }, {
                 text:"homework",
                 expanded:true,
                 children:[ {
                     text:"book report",
                     data:"html2.html",
                     leaf:true
                 }, {
                     text:"alegrbra",
                     data:"html3.html",
                     leaf:true
                 } ]
             }, {
                 text:"buy lottery tickets",
                 data:"html4.html",
                 leaf:true
             } ]
         }
     });
	 
    var treepanel = Ext.create("Ext.tree.Panel", {
         store:store,
         rootVisible:false,
         region:'west',
         listeners:{
             itemclick:function(v, r) {
                 if (r.raw.data) {
                     //获取节点的data的值
                     alert(r.raw.data);
                 }
             }
         },
         //renderTo:Ext.getBody()
        // renderTo:'westpanel',
         
     });
	
	Ext.create('Ext.container.Viewport', {
	    layout: 'border',
	    items: [{
	        region: 'north',
	        html: '<h1 class="x-panel-header">Page Title</h1>',
	        border: false,
	        margins: '0 0 5 0'
	    }, {
	        region: 'west',
	        collapsible: true,
	        title: 'Navigation',
	        width: 150,
	        //treepanel,
			id:'westpanel'
			items:[{'treepanel'}],
	        // 这里通常可以使用 TreePanel 或者 AccordionLayout布局的导航菜单
	    }, {
	        region: 'south',
	        title: 'South Panel',
	        collapsible: true,
	        html: 'Information goes here',
	        split: true,
	        height: 100,
	        minHeight: 100
	    }, {
	        region: 'east',
	        title: 'East Panel',
	        collapsible: true,
	        split: true,
	        width: 150
	    }, {
	        region: 'center',
	        xtype: 'tabpanel', // TabPanel本身没有title属性
	        activeTab: 0,      // 配置默认显示的激活面板
	        items: {
	            title: 'Default Tab',
	            html: 'The first tab\'s content. Others may be added dynamically'
	        }
	    }]
	});
	
    //只给leaf为true的节点加data，否则会与父节点展开事件发生冲突
   
});

*/
/*
Ext.onReady(function(){
	var store = Ext.create('Ext.data.TreeStore',
			{root:{
				expanded:true,
				children:[
					{text:"aaa",data:"html1.html",leaf:true},
					{text:"bbb",data:"html1.html",leaf:true},
					{text:'ccc',expanded:true,children:[{text:"c1",data:"html1.html",leaf:true},{text:"c2",data:"html1.html",leaf:true}]},
					{text:'ccc',expanded:true,children:[{text:"c1",data:"html1.html",leaf:true},{text:"c2",data:"html1.html",leaf:true}]},
					{text:'ccc',expanded:true,children:[{text:"c1",data:"html1.html",leaf:true},{text:"c2",data:"html1.html",leaf:true}]}
					]
				}
			}
			);

	var treepanel = Ext.create('Ext.tree.Panel',{
		//title:'mytree',
		width:200,
		
		store:store,
		scroll:'horizontal',
		rootVisible:false,
		//renderTo:'ceshi',
	});		
	
Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        border: false,
        margin: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150,
        split: true,
        items: [      	
        	treepanel,
        ]
        // could use a TreePanel or AccordionLayout for navigational items
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
   	 }]
	});
});
*/
/*
 * 1 直接在west中的 items 上把treepanel加上就可以了。

 2 首先给treepael 添加一个click事件，在单击时触发函数。函数体里面就写上往Viewport 中west块中添加panel的代码即可
 若不知道添加可查阅官方文档，里面有例子的。其实文档是最好的学习资料
 我这里简单写下
 假设 centen块的ID是 cTablePanel
 treePanel.on(“click”,function(){
 var p = new Ext.Panel({
 ........ // 这里写panel里面的内容

 });

 var a = Ext.getCmp("cTablePanel"); // 获得west块

 a.add(p); 
 })
 */
</script>

</head>
<body>

</body>
</html>